<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div style="margin: 0 auto;width: 30%;">
        <h2>学生管理系统</h2>
        <button style="margin-bottom: 10px;" onclick="location.href='./addUpdate.html?pageName=添加'">添加</button>
        <table border="1">
            <tbody>
                <tr align="center">
                    <td>编号</td><!-- 前端显示的一般是假编号 -->
                    <td>姓名</td>
                    <td>密码</td>
                    <td>性别</td>
                    <td>号码</td>
                    <td>操作</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="./axios.min.js"></script>
    <script>
        //当我们的页面一旦打开之后,我们需要发送ajax请求,获取服务器接口的信息
        axios({
            url: "http://localhost:8080/admin/student/queryAll"
        }) // axios返回的也是promise的结果,获取promise的返回结果 async/await  .then,.catch
            .then(res => {//axios的数据是在res.data
                const tbody = document.querySelector("tbody")
                res.data.msg.forEach((item, index) => {
                    /* 注意: 这里面用的是下标+1,而不是数据库的ID */
                    let str = `
                    <tr>
                        <td>${index + 1}</td>
                        <td>${item.name}</td>
                        <td>${item.password}</td>
                        <td>${item.gender}</td>
                        <td>${item.phone}</td>
                        <td>
                            <button data-id="${item.id}" data-name='del'>删除</button>
                            <button data-name='edit' data-id='${item.id}'>修改</button>
                        </td>
                    </tr>
                    `
                    tbody.innerHTML += str;
                })
            })

        /* 利用事件的委托来实现删除功能 */
        const tbody = document.querySelector("tbody")
        tbody.onclick = function (e) {
            /* 
                删除功能
                    注意:在删除操作前面,我们应该防止误删 => confirm来实现
                    1. 获取ID
                    2. 发送ajax,根据ID删除元素
            */
            // 获取元素身上的ID
            // console.log(e.target.dataset.id);
            if (e.target.dataset.name == 'del') {
                // 删除操作
                const result = window.confirm("您确定要删除吗?")
                if (result) {
                    const id = e.target.dataset.id
                    axios({
                        url: "http://localhost:8080/admin/student/remove",
                        method: "post",
                        data: {
                            id
                        }
                    })
                        .then(res => {
                            // console.log(res.data);
                            // 刷新一下页面就好
                            window.location.reload();
                        })
                }
            }
            else if (e.target.dataset.name == 'edit') {
                /* 
                    1. 获取ID,根据ID向服务器发送一个消息,从服务器里面获取当前这个学生的信息
                    2. 跳转到修改的学生信息页面,将上一步获取到的消息渲染到修改页面当中
                */
                const id = e.target.dataset.id
                //根据ID发送ajax请求
                axios({
                    url: `http://localhost:8080/admin/student/queryone?id=${id}`,
                })
                    .then(res => {
                        // console.log(res.data);
                        /* 
                            1. 将学生信息存储到sessionStorage里面去
                            2. 跳转到学生信息页面
                        */
                        // 将服务器返回的数据存储到Storage里面
                        sessionStorage.setItem("studentInfo", JSON.stringify(res.data.msg))
                        // 跳转到学生信息页面
                        location.href = "./addUpdate.html?pageName=修改"
                    })
            }
        }
    </script>
</body>

</html>